<template>
    <el-row >
        <!--  搜索操作区 -->
        <el-row class="pb10 little-header">
            <el-col :lg='20'  align='left'>
                    <el-row>
                        <el-col  :xs='24' :sm='6' :md='6'  :lg='6'  >
                          	<el-date-picker 
                						      v-model="search.choosevalue"
                						      type="datetimerange"
                						      :picker-options="pickerOptions"
                						      range-separator="至"
                						      start-placeholder="开始日期"
                						      end-placeholder="结束日期"
                                  :default-time="['00:00:00', '23:59:59']"
                						      align="left">
                				    </el-date-picker>
                        </el-col  >
                        <el-col  :xs='12' :sm='4' :md='4' :lg='3'  class='ml10'>
              				      <el-select v-model="search.type" placeholder="请选择" >
              								    <el-option
              								      v-for="item in options"
              								      :key="item.value"
              								      :label="item.label"
              								      :value="item.value">
              								    </el-option>
                						</el-select>
                        </el-col>
                        <el-col  :xs='10' :sm='5' :md='5' :lg='5'  class='ml10 '>
                            <el-input  placeholder='请输入操作者/内容' v-model.trim='search.name'  @focus='focusinput($event)'  @blur = 'blurinput($event)'></el-input>
                        </el-col>

                        <el-button icon="el-icon-search" type='primary' @click='pageInit()' class='ml10' >搜索</el-button>
                    </el-row>
            </el-col>
            <el-col :lg='{span:2,offset:1}' >  
                  <div align="right">
                          <!-- <el-button  class='export-icon'               size="small" round  @click="handleExport()"><i class='fa fa-share pr5'></i>导出</el-button> -->
                  </div>
            </el-col>
        </el-row>
        <!-- table -->
        <el-table border  :data="tableList" style="width: 100%" >
            <el-table-column prop="loginName"    label="登录名"      align="center"  fixed></el-table-column>
            <el-table-column prop="name"         label="姓名"        align="center"></el-table-column>
            <el-table-column prop="type"         label="类型"        align="center">
                <template slot-scope="scope">
                    {{scope.row.type | loginJournal_Type}}
                </template>
            </el-table-column>
            <el-table-column prop="result"       label="操作结果"     align="center">
                <template slot-scope="scope">
                    {{scope.row.result | loginJournal_Result}}
                </template>
            </el-table-column>
            <el-table-column prop="remoteAddr"   label="IP地址"      align="center"></el-table-column>
            <el-table-column prop="createTime"   label="操作时间"     align="center">
                <template slot-scope="scope">
                    {{scope.row.createTime | formatDate}}
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination class='mt28'
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="1"
              :page-sizes="[10, 20]"
              :page-size="10"
              :pager-count="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="Total">
        </el-pagination>
    </el-row>
</template>

<script>
/*interface*/
import { listLogin  } from '@/api/journal/login'

export default {
  name: 'login_journal',
  data () {
    return {
      /*static*/
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      options: [
          {value: '4',label: '全部类型'},
          {value: '1',label: '登录'}, 
          {value: '2',label: '登出'}],

      /*active*/
      

      //查询 /初始化
      search: {
        limit: 10,//每页查询条数
        currentPage:1,//当前页数
        choosevalue:'',
        type:'4',
        name:this.Global.ie_nine == true ? '请输入操作者/内容':'',/*placeholder 兼容ie9 △*/
      },
      search_place_str:'请输入操作者/内容',//placeholder输入内容 placeholder 兼容ie9 △
      Total:null,//表格总页数
      tableList:[],//角色列表data
      
    }
  },
  created() {
      this.pageInit()
  },
  methods:{
    // 初始化表格数据
    pageInit(){
      
      let that =this
      if(this.search.choosevalue==null){
          this.search.choosevalue=''
      }
      /*placeholder 兼容ie9 △*/
      if(this.search.name == this.search_place_str){
          this.search.name = ''
      }
      
      listLogin(this.search).then(response => {
          if(response.data.flag == true){
              this.Total = response.data.totalRs
              this.tableList = response.data.dataList
              /*placeholder 兼容ie9 △*/
              if(this.search.name == ''){
                  this.search.name = this.Global.ie_nine == true ? this.search_place_str:''
              }
          }
          
      })
      .catch(error => {
          
          that.outputError(error)
      })
      
    },

    //导出
    handleExport(){
    },
    
    /*placeholder 兼容ie9 focus-blur △*/
    focusinput(e){
        if(this.Global.ie_nine == true){
            this.search.name = this.search.name == this.search_place_str ? '':this.search.name
        }
    },
    blurinput(e){
        if(this.Global.ie_nine == true){
            let val = e.srcElement.value//ie9下只能用这个值
            this.search.name = val == '' ? this.search_place_str:val
        }
    },
    /*每页显示条数变化 事件触发*/
    handleSizeChange(val) {
        this.search.limit = val;
        this.pageInit()
    },
    /*页数变化 事件触发*/
    handleCurrentChange(val) {
        this.search.currentPage = val
        this.pageInit()
    },
  },
  components:{
    
  }
}
</script>


<style scoped>
  .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner{width: 100%;}
</style>
